<template>
    <div>
        <el-dialog @close="closeFn" v-model="visible" width="19%" :show-close="true" title="订阅设置">
            <div class="setting">设置要订阅的国家，确定后下次进入时生效（最多可添加4个国家）</div>
            <div class="list">
                <!-- ============================================================================ -->
                <div v-for="(item, index) in valueList" :key="item.id" class="listItem f f-a-c f-j-b">
                    <img @click="Reduction(index)" src="/src/status/jian.png" class="jianImg" alt="">
                    <div class="inpBox">
                        <el-select v-model="item.zh_name" class="m-2" placeholder="Select"
                            @change="changeFn($event, item.id, index)" size="large">
                            <el-option v-for="item in options" @click="sonList(item, index)" :key="item.id"
                                :label="item.zh_name" :value="item.zh_name" />
                        </el-select>
                    </div>
                </div>
                <!-- <div v-if="options[1]" class="listItem f f-a-c f-j-b">
                    <img @click="Reduction(2)" src="/src/status/jian.png" class="jianImg" alt="">
                    <div class="inpBox">
                        <el-select v-model="valueSettingTow" class="m-2" placeholder="Select" size="large">
                            <el-option v-for="item in options" :key="item.id" :label="item.zh_name" :value="item.zh_name" />
                        </el-select>
                    </div>
                </div>
                <div v-if="options[2]" class="listItem f f-a-c f-j-b">
                    <img @click="Reduction(3)" src="/src/status/jian.png" class="jianImg" alt="">
                    <div class="inpBox">
                        <el-select v-model="valueSettingStree" class="m-2" placeholder="Select" size="large">
                            <el-option v-for="item in options" :key="item.id" :label="item.zh_name" :value="item.zh_name" />
                        </el-select>
                    </div>
                </div>
                <div v-if="options[3]" class="listItem f f-a-c f-j-b">
                    <img @click="Reduction(4)" src="/src/status/jian.png" class="jianImg" alt="">
                    <div class="inpBox">
                        <el-select v-model="valueSettingFour" class="m-2" placeholder="Select" size="large">
                            <el-option v-for="item in options" :key="item.id" :label="item.zh_name" :value="item.zh_name" />
                        </el-select>
                    </div>
                </div> -->
                <!-- 添加国家----------------------------------------------------------------- -->
                <div v-if="valueList.length < 4" class="botjia">
                    <div @click="Added" class="Added f f-a-c">
                        <img src="/src/status/jia.png" class="jiaImg" alt="">添加国家
                    </div>
                </div>
                <!-- 下面的按钮 -->
                <div class="botBox">
                    <div class="btn">
                        <div @click="leftBtn" class="leftBtn">取消</div>
                        <div @click="comfig" class="rightBtn">确认</div>
                    </div>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

import { ModifyWikiUriIds } from '../../../api/index'
import { ElMessage } from 'element-plus'
const emit = defineEmits(['detilStuas', 'detilStuaJian','upData'])
let visible = ref(false)
let addGuo = ref(true)
let valueSettingOne = ref('中国')
let valueSettingTow = ref('中国')
let valueSettingStree = ref('中国')
let valueSettingFour = ref('中国')
let num1 = ref([false, false, false, false])
let list = ref([])
// 组件传值
const props = defineProps({
    valueList: {
        default: [],
        type: Array,
    },
    options: {
        default: [],
        type: Array,
    },

});
// let num2 = ref(false)
// let num3 = ref(false)
// let num4 = ref(false)
let options1 = ref([
    {
        value: '中国',
        label: '中国',
    },
    {
        value: '英国',
        label: '英国',
    }, {
        value: '俄罗斯',
        label: '俄罗斯',
    }
])
let options2 = ref([{
    value: '中国',
    label: '中国',
},
{
    value: '英国',
    label: '英国',
}])
let options3 = ref([{
    value: '中国',
    label: '中国',
},
{
    value: '英国',
    label: '英国',
}])
let options4 = ref([{
    value: '中国',
    label: '中国',
},
{
    value: '英国',
    label: '英国',
}])
const sonList = (item, index) => {
    list.value = props.valueList
    // console.log(e, item, index, '0000000000000000000');
    list.value[index] = item
    console.log(list.value, '0000000000000000000');
}
const changeFn = (e, item, index) => {

}
// 这个是生命周期
onMounted(() => {
    console.log(props.valueList, '123456');
})
// 点击确认
const comfig = async () => {
    let n = []
    props.valueList.forEach(item => {
        n.push(item.id)
    })
    let m = await ModifyWikiUriIds({
        wiki_uri_ids: n.join(',')
    })
    if (m.code == 200) {
        ElMessage.success(m.msg)
    } else {
        ElMessage.error(m.msg)
    }
    // 已经修改成功了
    visible.value = false
    // 调用父组件更新数据
    emit('upData')
}
const myMethod = (num) => {
    console.log('123123123');
}
// 这个是点击减
const Reduction = (num) => {
    num1.value[num - 1] = false
    // if (!num1.value.includes(true)) {
    addGuo.value = true
    emit('detilStuaJian', num)
    // }
}
const closeFn = () => {
    console.log('11111');
    visible.value = false
}
// 点击添加国家
const Added = () => {
    // 向父组件传函数
    emit('detilStua')
    // if (!num1.value[0] && !num1.value[1] && !num1.value[2] && !num1.value[3]) {
    //     num1.value[0] = true
    // } else if (!num1.value[1] && !num1.value[2] && !num1.value[3]) {
    //     num1.value[1] = true
    // } else if (!num1.value[2] && !num1.value[3]) {
    //     num1.value[2] = true
    // } else {
    //     num1.value[3] = true
    //     addGuo.value = false
    // }
}
// 点击取消
const leftBtn = () => {
    visible.value = false
}
defineExpose({
    visible
});

</script>
<style lang="scss" scoped>
@function pxfn($px) {
    @return calc($px / 18.4) * 1vw;
}

.botBox {
    display: flex;
    align-items: center;
    justify-content: end;
    margin-top: pxfn(15);
}

.btn {
    display: flex;
    align-items: center;

    .leftBtn {
        width: pxfn(78);
        height: pxfn(42);
        line-height: pxfn(42);
        border: pxfn(1) solid #e8eaef;
        border-radius: pxfn(6);
        font-size: pxfn(14);
        font-family: PingFang SC, PingFang SC-500;
        font-weight: 500;
        text-align: center;
        color: #1d2129;
        margin-right: pxfn(15);
    }

    .rightBtn {
        width: pxfn(78);
        height: pxfn(42);
        line-height: pxfn(42);
        border: pxfn(1) solid #e8eaef;
        border-radius: pxfn(6);
        font-size: pxfn(14);
        font-family: PingFang SC, PingFang SC-500;
        font-weight: 500;
        text-align: center;
        color: #fff;
        background-color: #32BBEA;
    }
}

.botjia {
    display: flex;
    justify-content: center;
}

::v-deep .el-input__wrapper {
    // width: pxfn(280) !important;
    width: pxfn(270) !important;
    height: pxfn(40) !important;
}

// ::v-deep  .el-input__wrapper {
//     width: 100% !important;
// }

.Added {
    width: pxfn(275);
    height: pxfn(40);
    margin-left: 8%;
    border: pxfn(1) solid #32bbea;
    border-radius: pxfn(6);
    font-size: pxfn(14);
    font-family: PingFang SC, PingFang SC-400;
    font-weight: 400;
    // text-align: LEFT;
    color: #32bbea;
    padding-left: pxfn(5);

    .jiaImg {
        width: pxfn(16);
        height: pxfn(16);
    }
}

.listItem {
    position: relative;
    margin-bottom: pxfn(15);

    .jiantou {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: pxfn(10);
        width: pxfn(10);
        height: pxfn(10);
    }

    .jianImg {
        width: pxfn(15);
        height: pxfn(14.3);
    }

    .inpBox {
        position: relative;
        width: 90%;
        height: pxfn(40);
        // border: pxfn(1) solid #e8eaef;
        border-radius: pxfn(6);
    }

    .inp {
        width: 100%;
        height: 100%;
        border: none;
        padding-left: pxfn(10);
    }
}

::v-deep .el-dialog {
    border-radius: pxfn(15) !important;
}

::v-deep .el-dialog__title {
    font-size: pxfn(22) !important;
    font-weight: 600 !important;
}

::v-deep .el-dialog__body {
    padding-top: pxfn(10) !important;
    padding-bottom: pxfn(20) !important;
}

.setting {
    font-size: pxfn(14);
    font-family: PingFang SC, PingFang SC-400;
    font-weight: 400;
    text-align: LEFT;
    color: #1d2129;
    margin-bottom: pxfn(15);
}
</style>